import React, { Component } from 'react'
import './07.css';
export default class SliderCom extends Component {
  state = {
    num: 1
  }
  
  //声明下一张的事件回调
  next = () => {
    //获取 num 的值
    let {num} = this.state;
    //判断
    if(num >= 5){
      num = 1;
    }else{
      num += 1;
    }

    this.setState({
      num
    });
  }

  //声明上一张的事件回调
  prev = () => {
    //获取当前的 num 值
    let {num} = this.state;
    //判断
    if(num <= 1){
      num = 5;
    }else{
      num -= 1;
    }
    //更新状态
    this.setState({
      num: num
    })
  }

  render() {
    return (
      <div className='slider-container'>
        <img src={`/images/${this.state.num}.jpg`} alt="" />
        <div className="prev btn" onClick={this.prev}>&lt;</div>
        <div className="next btn" onClick={this.next}>&gt;</div>
      </div>
    )
  }
}


